<!-- @author luoandong -->
<template>
  <div class="icon-body">
    <el-input v-model="name" size="small" style="position: relative;margin-bottom:10px;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list">
      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <i :class="item.icon" style="height: 40px;width: 40px; font-size:20px;padding-top:5px;" />
      </div>
    </div>
  </div>
</template>

<script>

const icons = [
        {icon:'fas fa-eye-dropper'},
        {icon:'fab fa-500px'},
        {icon:'fab fa-accessible-icon'},
        {icon:'fab fa-accusoft'},
        {icon:'fab fa-acquisitions-incorporated'},
        {icon:'fas fa-ad'},
        {icon:'fas fa-address-book'},
        {icon:'far fa-address-book'},
        {icon:'fas fa-address-card'},
        {icon:'far fa-address-card'},
        {icon:'fas fa-adjust'},
        {icon:'fab fa-adn'},
        {icon:'fab fa-adobe'},
        {icon:'fab fa-adversal'},
        {icon:'fab fa-affiliatetheme'},
        {icon:'fas fa-air-freshener'},
        {icon:'fab fa-airbnb'},
        {icon:'fab fa-algolia'},
        {icon:'fas fa-align-center'},
        {icon:'fas fa-align-justify'},
        {icon:'fas fa-align-left'},
        {icon:'fas fa-align-right'},
        {icon:'fab fa-alipay'},
        {icon:'fas fa-allergies'},
        {icon:'fab fa-amazon'},
        {icon:'fab fa-amazon-pay'},
        {icon:'fas fa-ambulance'},
        {icon:'fas fa-american-sign-language-interpreting'},
        {icon:'fab fa-amilia'},
        {icon:'fas fa-anchor'},
        {icon:'fab fa-android'},
        {icon:'fab fa-angellist'},
        {icon:'fas fa-angle-double-down'},
        {icon:'fas fa-angle-double-left'},
        {icon:'fas fa-angle-double-right'},
        {icon:'fas fa-angle-double-up'},
        {icon:'fas fa-angle-down'},
        {icon:'fas fa-angle-left'},
        {icon:'fas fa-angle-right'},
        {icon:'fas fa-angle-up'},
        {icon:'fas fa-angry'},
        {icon:'far fa-angry'},
        {icon:'fab fa-angrycreative'},
        {icon:'fab fa-angular'},
        {icon:'fas fa-ankh'},
        {icon:'fab fa-app-store'},
        {icon:'fab fa-app-store-ios'},
        {icon:'fab fa-apper'},
        {icon:'fab fa-apple'},
        {icon:'fas fa-apple-alt'},
        {icon:'fab fa-apple-pay'},
        {icon:'fas fa-archive'},
        {icon:'fas fa-archway'},
        {icon:'fas fa-arrow-alt-circle-down'},
        {icon:'far fa-arrow-alt-circle-down'},
        {icon:'fas fa-arrow-alt-circle-left'},
        {icon:'far fa-arrow-alt-circle-left'},
        {icon:'fas fa-arrow-alt-circle-right'},
        {icon:'far fa-arrow-alt-circle-right'},
        {icon:'fas fa-arrow-alt-circle-up'},
        {icon:'far fa-arrow-alt-circle-up'},
        {icon:'fas fa-arrow-circle-down'},
        {icon:'fas fa-arrow-circle-left'},
        {icon:'fas fa-arrow-circle-right'},
        {icon:'fas fa-arrow-circle-up'},
        {icon:'fas fa-arrow-down'},
        {icon:'fas fa-arrow-left'},
        {icon:'fas fa-arrow-right'},
        {icon:'fas fa-arrow-up'},
        {icon:'fas fa-arrows-alt'},
        {icon:'fas fa-arrows-alt-h'},
        {icon:'fas fa-arrows-alt-v'},
        {icon:'fab fa-artstation'},
        {icon:'fas fa-assistive-listening-systems'},
        {icon:'fas fa-asterisk'},
        {icon:'fab fa-asymmetrik'},
        {icon:'fas fa-at'},
        {icon:'fas fa-atlas'},
        {icon:'fab fa-atlassian'},
        {icon:'fas fa-atom'},
        {icon:'fab fa-audible'},
        {icon:'fas fa-audio-description'},
        {icon:'fab fa-autoprefixer'},
        {icon:'fab fa-avianex'},
        {icon:'fab fa-aviato'},
        {icon:'fas fa-award'},
        {icon:'fab fa-aws'},
        {icon:'fas fa-baby'},
        {icon:'fas fa-baby-carriage'},
        {icon:'fas fa-backspace'},
        {icon:'fas fa-backward'},
        {icon:'fas fa-bacon'},
        {icon:'fas fa-bahai'},
        {icon:'fas fa-balance-scale'},
        {icon:'fas fa-balance-scale-left'},
        {icon:'fas fa-balance-scale-right'},
        {icon:'fas fa-ban'},
        {icon:'fas fa-band-aid'},
        {icon:'fab fa-bandcamp'},
        {icon:'fas fa-barcode'},
        {icon:'fas fa-bars'},
        {icon:'fas fa-baseball-ball'},
        {icon:'fas fa-basketball-ball'},
        {icon:'fas fa-bath'},
        {icon:'fas fa-battery-empty'},
        {icon:'fas fa-battery-full'},
        {icon:'fas fa-battery-half'},
        {icon:'fas fa-battery-quarter'},
        {icon:'fas fa-battery-three-quarters'},
        {icon:'fab fa-battle-net'},
        {icon:'fas fa-bed'},
        {icon:'fas fa-beer'},
        {icon:'fab fa-behance'},
        {icon:'fab fa-behance-square'},
        {icon:'fas fa-bell'},
        {icon:'far fa-bell'},
        {icon:'fas fa-bell-slash'},
        {icon:'far fa-bell-slash'},
        {icon:'fas fa-bezier-curve'},
        {icon:'fas fa-bible'},
        {icon:'fas fa-bicycle'},
        {icon:'fas fa-biking'},
        {icon:'fab fa-bimobject'},
        {icon:'fas fa-binoculars'},
        {icon:'fas fa-biohazard'},
        {icon:'fas fa-birthday-cake'},
        {icon:'fab fa-bitbucket'},
        {icon:'fab fa-bitcoin'},
        {icon:'fab fa-bity'},
        {icon:'fab fa-black-tie'},
        {icon:'fab fa-blackberry'},
        {icon:'fas fa-blender'},
        {icon:'fas fa-blender-phone'},
        {icon:'fas fa-blind'},
        {icon:'fas fa-blog'},
        {icon:'fab fa-blogger'},
        {icon:'fab fa-blogger-b'},
        {icon:'fab fa-bluetooth'},
        {icon:'fab fa-bluetooth-b'},
        {icon:'fas fa-bold'},
        {icon:'fas fa-bolt'},
        {icon:'fas fa-bomb'},
        {icon:'fas fa-bone'},
        {icon:'fas fa-bong'},
        {icon:'fas fa-book'},
        {icon:'fas fa-book-dead'},
        {icon:'fas fa-book-medical'},
        {icon:'fas fa-book-open'},
        {icon:'fas fa-book-reader'},
        {icon:'fas fa-bookmark'},
        {icon:'far fa-bookmark'},
        {icon:'fab fa-bootstrap'},
        {icon:'fas fa-border-all'},
        {icon:'fas fa-border-none'},
        {icon:'fas fa-border-style'},
        {icon:'fas fa-bowling-ball'},
        {icon:'fas fa-box'},
        {icon:'fas fa-box-open'},
        {icon:'fas fa-boxes'},
        {icon:'fas fa-braille'},
        {icon:'fas fa-brain'},
        {icon:'fas fa-bread-slice'},
        {icon:'fas fa-briefcase'},
        {icon:'fas fa-briefcase-medical'},
        {icon:'fas fa-broadcast-tower'},
        {icon:'fas fa-broom'},
        {icon:'fas fa-brush'},
        {icon:'fab fa-btc'},
        {icon:'fab fa-buffer'},
        {icon:'fas fa-bug'},
        {icon:'fas fa-building'},
        {icon:'far fa-building'},
        {icon:'fas fa-bullhorn'},
        {icon:'fas fa-bullseye'},
        {icon:'fas fa-burn'},
        {icon:'fab fa-buromobelexperte'},
        {icon:'fas fa-bus'},
        {icon:'fas fa-bus-alt'},
        {icon:'fas fa-business-time'},
        {icon:'fab fa-buy-n-large'},
        {icon:'fab fa-buysellads'},
        {icon:'fas fa-calculator'},
        {icon:'fas fa-calendar'},
        {icon:'far fa-calendar'},
        {icon:'fas fa-calendar-alt'},
        {icon:'far fa-calendar-alt'},
        {icon:'fas fa-calendar-check'},
        {icon:'far fa-calendar-check'},
        {icon:'fas fa-calendar-day'},
        {icon:'fas fa-calendar-minus'},
        {icon:'far fa-calendar-minus'},
        {icon:'fas fa-calendar-plus'},
        {icon:'far fa-calendar-plus'},
        {icon:'fas fa-calendar-times'},
        {icon:'far fa-calendar-times'},
        {icon:'fas fa-calendar-week'},
        {icon:'fas fa-camera'},
        {icon:'fas fa-camera-retro'},
        {icon:'fas fa-campground'},
        {icon:'fab fa-canadian-maple-leaf'},
        {icon:'fas fa-candy-cane'},
        {icon:'fas fa-cannabis'},
        {icon:'fas fa-capsules'},
        {icon:'fas fa-car'},
        {icon:'fas fa-car-alt'},
        {icon:'fas fa-car-battery'},
        {icon:'fas fa-car-crash'},
        {icon:'fas fa-car-side'},
        {icon:'fas fa-caravan'},
        {icon:'fas fa-caret-down'},
        {icon:'fas fa-caret-left'},
        {icon:'fas fa-caret-right'},
        {icon:'fas fa-caret-square-down'},
        {icon:'far fa-caret-square-down'},
        {icon:'fas fa-caret-square-left'},
        {icon:'far fa-caret-square-left'},
        {icon:'fas fa-caret-square-right'},
        {icon:'far fa-caret-square-right'},
        {icon:'fas fa-caret-square-up'},
        {icon:'far fa-caret-square-up'},
        {icon:'fas fa-caret-up'},
        {icon:'fas fa-carrot'},
        {icon:'fas fa-cart-arrow-down'},
        {icon:'fas fa-cart-plus'},
        {icon:'fas fa-cash-register'},
        {icon:'fas fa-cat'},
        {icon:'fab fa-cc-amazon-pay'},
        {icon:'fab fa-cc-amex'},
        {icon:'fab fa-cc-apple-pay'},
        {icon:'fab fa-cc-diners-club'},
        {icon:'fab fa-cc-discover'},
        {icon:'fab fa-cc-jcb'},
        {icon:'fab fa-cc-mastercard'},
        {icon:'fab fa-cc-paypal'},
        {icon:'fab fa-cc-stripe'},
        {icon:'fab fa-cc-visa'},
        {icon:'fab fa-centercode'},
        {icon:'fab fa-centos'},
        {icon:'fas fa-certificate'},
        {icon:'fas fa-chair'},
        {icon:'fas fa-chalkboard'},
        {icon:'fas fa-chalkboard-teacher'},
        {icon:'fas fa-charging-station'},
        {icon:'fas fa-chart-area'},
        {icon:'fas fa-chart-bar'},
        {icon:'far fa-chart-bar'},
        {icon:'fas fa-chart-line'},
        {icon:'fas fa-chart-pie'},
        {icon:'fas fa-check'},
        {icon:'fas fa-check-circle'},
        {icon:'far fa-check-circle'},
        {icon:'fas fa-check-double'},
        {icon:'fas fa-check-square'},
        {icon:'far fa-check-square'},
        {icon:'fas fa-cheese'},
        {icon:'fas fa-chess'},
        {icon:'fas fa-chess-bishop'},
        {icon:'fas fa-chess-board'},
        {icon:'fas fa-chess-king'},
        {icon:'fas fa-chess-knight'},
        {icon:'fas fa-chess-pawn'},
        {icon:'fas fa-chess-queen'},
        {icon:'fas fa-chess-rook'},
        {icon:'fas fa-chevron-circle-down'},
        {icon:'fas fa-chevron-circle-left'},
        {icon:'fas fa-chevron-circle-right'},
        {icon:'fas fa-chevron-circle-up'},
        {icon:'fas fa-chevron-down'},
        {icon:'fas fa-chevron-left'},
        {icon:'fas fa-chevron-right'},
        {icon:'fas fa-chevron-up'},
        {icon:'fas fa-child'},
        {icon:'fab fa-chrome'},
        {icon:'fab fa-chromecast'},
        {icon:'fas fa-church'},
        {icon:'fas fa-circle'},
        {icon:'far fa-circle'},
        {icon:'fas fa-circle-notch'},
        {icon:'fas fa-city'},
        {icon:'fas fa-clinic-medical'},
        {icon:'fas fa-clipboard'},
        {icon:'far fa-clipboard'},
        {icon:'fas fa-clipboard-check'},
        {icon:'fas fa-clipboard-list'},
        {icon:'fas fa-clock'},
        {icon:'far fa-clock'},
        {icon:'fas fa-clone'},
        {icon:'far fa-clone'},
        {icon:'fas fa-closed-captioning'},
        {icon:'far fa-closed-captioning'},
        {icon:'fas fa-cloud'},
        {icon:'fas fa-cloud-download-alt'},
        {icon:'fas fa-cloud-meatball'},
        {icon:'fas fa-cloud-moon'},
        {icon:'fas fa-cloud-moon-rain'},
        {icon:'fas fa-cloud-rain'},
        {icon:'fas fa-cloud-showers-heavy'},
        {icon:'fas fa-cloud-sun'},
        {icon:'fas fa-cloud-sun-rain'},
        {icon:'fas fa-cloud-upload-alt'},
        {icon:'fab fa-cloudscale'},
        {icon:'fab fa-cloudsmith'},
        {icon:'fab fa-cloudversify'},
        {icon:'fas fa-cocktail'},
        {icon:'fas fa-code'},
        {icon:'fas fa-code-branch'},
        {icon:'fab fa-codepen'},
        {icon:'fab fa-codiepie'},
        {icon:'fas fa-coffee'},
        {icon:'fas fa-cog'},
        {icon:'fas fa-cogs'},
        {icon:'fas fa-coins'},
        {icon:'fas fa-columns'},
        {icon:'fas fa-comment'},
        {icon:'far fa-comment'},
        {icon:'fas fa-comment-alt'},
        {icon:'far fa-comment-alt'},
        {icon:'fas fa-comment-dollar'},
        {icon:'fas fa-comment-dots'},
        {icon:'far fa-comment-dots'},
        {icon:'fas fa-comment-medical'},
        {icon:'fas fa-comment-slash'},
        {icon:'fas fa-comments'},
        {icon:'far fa-comments'},
        {icon:'fas fa-comments-dollar'},
        {icon:'fas fa-compact-disc'},
        {icon:'fas fa-compass'},
        {icon:'far fa-compass'},
        {icon:'fas fa-compress'},
        {icon:'fas fa-compress-alt'},
        {icon:'fas fa-compress-arrows-alt'},
        {icon:'fas fa-concierge-bell'},
        {icon:'fab fa-confluence'},
        {icon:'fab fa-connectdevelop'},
        {icon:'fab fa-contao'},
        {icon:'fas fa-cookie'},
        {icon:'fas fa-cookie-bite'},
        {icon:'fas fa-copy'},
        {icon:'far fa-copy'},
        {icon:'fas fa-copyright'},
        {icon:'far fa-copyright'},
        {icon:'fab fa-cotton-bureau'},
        {icon:'fas fa-couch'},
        {icon:'fab fa-cpanel'},
        {icon:'fab fa-creative-commons'},
        {icon:'fab fa-creative-commons-by'},
        {icon:'fab fa-creative-commons-nc'},
        {icon:'fab fa-creative-commons-nc-eu'},
        {icon:'fab fa-creative-commons-nc-jp'},
        {icon:'fab fa-creative-commons-nd'},
        {icon:'fab fa-creative-commons-pd'},
        {icon:'fab fa-creative-commons-pd-alt'},
        {icon:'fab fa-creative-commons-remix'},
        {icon:'fab fa-creative-commons-sa'},
        {icon:'fab fa-creative-commons-sampling'},
        {icon:'fab fa-creative-commons-sampling-plus'},
        {icon:'fab fa-creative-commons-share'},
        {icon:'fab fa-creative-commons-zero'},
        {icon:'fas fa-credit-card'},
        {icon:'far fa-credit-card'},
        {icon:'fab fa-critical-role'},
        {icon:'fas fa-crop'},
        {icon:'fas fa-crop-alt'},
        {icon:'fas fa-cross'},
        {icon:'fas fa-crosshairs'},
        {icon:'fas fa-crow'},
        {icon:'fas fa-crown'},
        {icon:'fas fa-crutch'},
        {icon:'fab fa-css3'},
        {icon:'fab fa-css3-alt'},
        {icon:'fas fa-cube'},
        {icon:'fas fa-cubes'},
        {icon:'fas fa-cut'},
        {icon:'fab fa-cuttlefish'},
        {icon:'fab fa-d-and-d'},
        {icon:'fab fa-d-and-d-beyond'},
        {icon:'fab fa-dashcube'},
        {icon:'fas fa-database'},
        {icon:'fas fa-deaf'},
        {icon:'fab fa-delicious'},
        {icon:'fas fa-democrat'},
        {icon:'fab fa-deploydog'},
        {icon:'fab fa-deskpro'},
        {icon:'fas fa-desktop'},
        {icon:'fab fa-dev'},
        {icon:'fab fa-deviantart'},
        {icon:'fas fa-dharmachakra'},
        {icon:'fab fa-dhl'},
        {icon:'fas fa-diagnoses'},
        {icon:'fab fa-diaspora'},
        {icon:'fas fa-dice'},
        {icon:'fas fa-dice-d20'},
        {icon:'fas fa-dice-d6'},
        {icon:'fas fa-dice-five'},
        {icon:'fas fa-dice-four'},
        {icon:'fas fa-dice-one'},
        {icon:'fas fa-dice-six'},
        {icon:'fas fa-dice-three'},
        {icon:'fas fa-dice-two'},
        {icon:'fab fa-digg'},
        {icon:'fab fa-digital-ocean'},
        {icon:'fas fa-digital-tachograph'},
        {icon:'fas fa-directions'},
        {icon:'fab fa-discord'},
        {icon:'fab fa-discourse'},
        {icon:'fas fa-divide'},
        {icon:'fas fa-dizzy'},
        {icon:'far fa-dizzy'},
        {icon:'fas fa-dna'},
        {icon:'fab fa-dochub'},
        {icon:'fab fa-docker'},
        {icon:'fas fa-dog'},
        {icon:'fas fa-dollar-sign'},
        {icon:'fas fa-dolly'},
        {icon:'fas fa-dolly-flatbed'},
        {icon:'fas fa-donate'},
        {icon:'fas fa-door-closed'},
        {icon:'fas fa-door-open'},
        {icon:'fas fa-dot-circle'},
        {icon:'far fa-dot-circle'},
        {icon:'fas fa-dove'},
        {icon:'fas fa-download'},
        {icon:'fab fa-draft2digital'},
        {icon:'fas fa-drafting-compass'},
        {icon:'fas fa-dragon'},
        {icon:'fas fa-draw-polygon'},
        {icon:'fab fa-dribbble'},
        {icon:'fab fa-dribbble-square'},
        {icon:'fab fa-dropbox'},
        {icon:'fas fa-drum'},
        {icon:'fas fa-drum-steelpan'},
        {icon:'fas fa-drumstick-bite'},
        {icon:'ficon:ab fa-drupal'},
        {icon:'fas fa-dumbbell'},
        {icon:'fas fa-dumpster'},
        {icon:'fas fa-dumpster-fire'},
        {icon:'fas fa-dungeon'},
        {icon:'fab fa-dyalog'},
        {icon:'fab fa-earlybirds'},
        {icon:'fab fa-ebay'},
        {icon:'fab fa-edge'},
        {icon:'fas fa-edit'},
        {icon:'far fa-edit'},
        {icon:'fas fa-egg'},
        {icon:'fas fa-eject'},
        {icon:'fab fa-elementor'},
        {icon:'fas fa-ellipsis-h'},
        {icon:'fas fa-ellipsis-v'},
        {icon:'fab fa-ello'},
        {icon:'fab fa-ember'},
        {icon:'fab fa-empire'},
        {icon:'fas fa-envelope'},
        {icon:'far fa-envelope'},
        {icon:'fas fa-envelope-open'},
        {icon:'far fa-envelope-open'},
        {icon:'fas fa-envelope-open-text'},
        {icon:'fas fa-envelope-square'},
        {icon:'fab fa-envira'},
        {icon:'fas fa-equals'},
        {icon:'fas fa-eraser'},
        {icon:'fab fa-erlang'},
        {icon:'fab fa-ethereum'},
        {icon:'fas fa-ethernet'},
        {icon:'fab fa-etsy'},
        {icon:'fas fa-euro-sign'},
        {icon:'fab fa-evernote'},
        {icon:'fas fa-exchange-alt'},
        {icon:'fas fa-exclamation'},
        {icon:'fas fa-exclamation-circle'},
        {icon:'fas fa-exclamation-triangle'},
        {icon:'fas fa-expand'},
        {icon:'fas fa-expand-arrows-alt'},
        {icon:'fab fa-expeditedssl'},
        {icon:'fas fa-external-link-alt'},
        {icon:'fas fa-external-link-square-alt'},
        {icon:'fas fa-eye'},
        {icon:'far fa-eye'},
        {icon:'fas fa-eye-dropper'},
        {icon:'fas fa-eye-slash'},
        {icon:'far fa-eye-slash'},
        {icon:'fab fa-facebook'},
        {icon:'fab fa-facebook-f'},
        {icon:'fab fa-facebook-messenger'},
        {icon:'fab fa-facebook-square'},
        {icon:'fas fa-fan'},
        {icon:'fab fa-fantasy-flight-games'},
        {icon:'fas fa-fast-backward'},
        {icon:'fas fa-fast-forward'},
        {icon:'fas fa-fax'},
        {icon:'fas fa-feather'},
        {icon:'fas fa-feather-alt'},
        {icon:'fab fa-fedex'},
        {icon:'fab fa-fedora'},
        {icon:'fas fa-female'},
        {icon:'fas fa-fighter-jet'},
        {icon:'fab fa-figma'},
        {icon:'fas fa-file'},
        {icon:'far fa-file'},
        {icon:'fas fa-file-alt'},
        {icon:'far fa-file-alt'},
        {icon:'fas fa-file-archive'},
        {icon:'far fa-file-archive'},
        {icon:'fas fa-file-audio'},
        {icon:'far fa-eye-slash'}
      ] ; 

export default {
  name: 'IconSelect',
  data() {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(item) {
      this.$emit('selected', item.icon)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

@import url('http://static.cloud.linesno.com/asserts/vendors/fontawesome/css/all.css');

  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
      height: 200px;
      overflow-y: scroll;
      div {
        height: 40px;
        line-height: 40px;
        margin-bottom: -5px;
        cursor: pointer;
        width: auto;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
</style>